<template>
  <div class="owners-group">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/sys/ownersGroup?navIndex=2' }">业委会</el-breadcrumb-item>
      <el-breadcrumb-item
        :to="{ path: '/sys/ownersGroup?navIndex=2' }"
        v-if="dtype!='list'"
        @click.native="dtype='list'"
      >业委会成员</el-breadcrumb-item>
      <el-breadcrumb-item v-if="dtype=='list'">业委会成员</el-breadcrumb-item>
      <el-breadcrumb-item v-if="dtype=='add'">添加成员</el-breadcrumb-item>
      <el-breadcrumb-item v-if="dtype=='edit'">编辑成员</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row class="el-margin-v-30 el-padding-l-25 el-padding-r-40">
      <el-row class="el-padding-20 el-white-bgcolor">
        <el-row v-show="dtype==='list'">
          <el-button type="primary" size="small" @click="routeTo('add')">添加成员</el-button>
          <el-table
            class="el-margin-t-10"
            :data="table.tableData"
            border
            stripe
            style="width:100%"
            size="small"
            :highlight-current-row="true"
            ref="multipleTable"
          >
            <el-table-column label="姓名" prop="name" width="180"></el-table-column>
            <el-table-column label="手机号码" prop="telephone" width="180"></el-table-column>
            <el-table-column label="楼栋" prop="buildNum"></el-table-column>
            <el-table-column label="单元" prop="unitNum"></el-table-column>
            <el-table-column label="房号" prop="house" width="180"></el-table-column>
            <el-table-column label="职位" prop="dutyNum" width="120">
              <template slot-scope="scope">{{dutys[scope.row.dutyNum-1]}}</template>
            </el-table-column>
            <el-table-column label="组织" prop="group"></el-table-column>
            <el-table-column label="创建时间" prop="time" width="180">
              <template slot-scope="scope">{{scope.row.time|dateformat()}}</template>
            </el-table-column>
            <el-table-column label="操作" width="150">
              <template slot-scope="scope">
                <!--el-button type="text" @click="routeTo('edit',scope.row)">编辑</el-button-->
                <el-button type="text" @click="del(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            class="el-margin-t-10 my-el-pagination"
            @current-change="currentChangeHandle"
            :current-page="table.currentPage"
            :page-size="table.pageSize"
            layout="total, prev, pager, next, jumper"
            :total="table.rowCount"
          ></el-pagination>
        </el-row>
        <ou-editor v-show="dtype!=='list'" :dtype="dtype" @rePrev="rePrev" :ruleForm="curRow"></ou-editor>
      </el-row>
    </el-row>
  </div>
</template>
<script>
import { bus } from "../../tools/bus";
import { setItem, getItem } from "../../tools/common";
import ouEditor from "./addOrEdit.vue";
export default {
  components: {
    ouEditor
  },
  data() {
    return {
      dtype: "list",
      dutys: ["主任", "副主任", "委员"],
      curRow: {},
      table: {
        tableData: [],
        currentPage: 1,
        pageSize: 10,
        rowCount: 3,
        queryKey: ""
      }
    };
  },
  mounted() {
    this.getMessage();
  },
  methods: {
    routeTo(type, rows) {
      let self = this;
      let info = getItem("info") ? getItem("info") : {};
      self.dtype = type;
      self.curRow = rows
        ? rows
        : {
            communityId: info.communityId,
            name: "",
            telephone: "",
            time: "",
            house: "",
            dutyNum: "",
            group: "",
            buildNum: "", //楼栋
            unitNum: "" //单元
          };
    },
    getMessage() {
      let url = "/committee/listMember";
      let info = getItem("info") ? getItem("info") : {};
      let p = {
        communityId: info.communityId,
        start: (this.table.currentPage - 1) * this.table.pageSize,
        num: this.table.pageSize
      };

      this.$http
        .fetch(url, p)
        .then(res => {
          this.table.rowCount = res.data.total;
          this.table.tableData = [];
          for (let i = 0; i < res.data.rows.length; i++) {
            let row = res.data.rows[i];
            this.table.tableData.push({
              committeeMemberId: row.committeeMemberId
                ? row.committeeMemberId
                : "",
              name: row.realName ? row.realName : "",
              telephone: row.phoneNum ? row.phoneNum : "",
              time: row.createTime ? row.createTime : "",
              house: row.houseNum ? row.houseNum : "",
              dutyNum: row.memberType ? row.memberType : "",
              group: row.committeeName ? row.committeeName : "",
              buildNum: row.buildNum ? row.buildNum : "", //楼栋
              unitNum: row.unitNum ? row.unitNum : "" //单元
            });
          }
        })
        .catch(err => {});
    },
    currentChangeHandle(pageNum) {
      this.table.currentPage = pageNum;
      this.getMessage();
    },
    del(rows) {
      this.$confirm("是否确认删除", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let url = "/committee/deleteMember";
          let p = {
            committeeMemberId: rows.committeeMemberId
          };

          this.$http
            .fetch(url, p)
            .then(res => {
              this.$message({
                type: "success",
                message: `删除成功`
              });
              if (
                this.table.tableData.length == 1 &&
                this.table.currentPage > 1
              ) {
                this.table.currentPage -= 1;
              }
              this.getMessage();
            })
            .catch(err => {});
        })
        .catch(() => {});
    },
    rePrev(isUpdate) {
      this.dtype = "list";
      if (isUpdate) {
        this.getMessage();
      }
    }
  }
};
</script>
